<template>
  <div class="home-container">
    <!-- 头部导航 -->
    <div :class="['head-navigation', ifFilter?'filter-head':'']">
      <div class="left-part"><img :class="logoStyle[channel]" :src="!ifFilter?navLogo[channel].white:navLogo[channel].black" alt=""></div>
      <div class="right-part">
        <div :class="['nav-btn', item.ifCheck ? (ifFilter?'active-filter':'active')  : 'noactive']" v-for="(item, key) in navBtnsData" :key="key"
          @mouseenter="onMouseEnter(item, key)" @mouseleave="onMouseLeave(item, key)" @click="switchTab(item, key)">
          <div :class="['desc', !ifFilter?'': (item.ifCheck?'':'filter-color')]">{{ item.desc }}</div>
          <div :class="!ifFilter ? 'bottom-line' : 'bottom-line filter-line'" v-if="item.ifCheck"></div>
        </div>
      </div>
    </div>
    <!-- 头部背景图 -->
    <div class="head-img">
      <div class="float-text">
        <p class="p1">{{ $t('text622') }}</p>
        <p class="p2">{{ $t('text722') }}</p>
      </div>
      <div class="contact-us" @click="switchTab({},3)">
        <span class="iconfont icon-icon-phone-2 font-23"></span>
        <span class="text">{{ $t('text522') }}</span>
      </div>
    </div>
    <!-- 背景图第二张 -->
    <div class="two-img-box" >
      <div class="float-text">
        <p class="p1">{{ $t('text822') }}</p>
        <p class="p2">{{ $t('text922') }}</p>
      </div>
    </div>
    <!-- 背景图第三张 -->
    <div class="three-img-box">
      <div class="float-text">
        <p class="p1">{{ $t('text1022') }}</p>
        <p class="p2">{{ $t('text1122') }}</p>
      </div>
    </div>
    <!-- 提交表单 -->
    <div class="submit-form" ref="bgTwo">
      <img :src="submitLogo[channel]" alt="" class="logo">

      <div class="float-text">{{ $t('text1222') }}</div>
      <div class="form-part">
        <div class="input-box user-name" >       
          <span :class="['iconfont icon-icon-user-name font-24']"></span>
          <input v-model="params.name" type="text" :placeholder="$t('text1322')" @blur="blurFn($event)" @focus="focusFn($event)" @input="inputFn($event)">
        </div>
        <div class="input-box email" >
          <span :class="['iconfont icon-icon-Email font-24']"></span>
          <input v-model="params.email" type="text" :placeholder="$t('text1422')" @blur="blurFn($event)" @focus="focusFn($event)" @input="inputFn($event)">
        </div>
        <div class="input-box phone" >
          <span :class="['iconfont icon-icon-phone-2 font-20']"></span>
          <input v-model="params.phone" type="text" :placeholder="$t('text1522')" @blur="blurFn($event)" @focus="focusFn($event)" @input="inputFn($event)">
        </div>
        <div class="input-box question" >  
          <span :class="['iconfont icon-icon-question font-24']"></span>
          <input v-model="params.question" type="text" :placeholder="$t('text1622')" @blur="blurFn($event)" @focus="focusFn($event)" @input="inputFn($event)">
        </div>
      </div>
      <div :class="['submit-btn',ifLightsubmitbtn?'light-submit-btn':'']" @click="submitForm">
        <img v-if="ifSubmit" class="loading-icon" src="../assets/img/loading.png" alt="">
        <span>{{ $t('text1722') }}</span>
      </div>
    </div>
    <!-- 底部备案部分 -->
    <div class="bottom-part">
      <div class="conpanpy flex-left">
        <span class="iconfont icon-icon_company font-20"></span>
        <div class="text">{{ recordName[channel].company }}</div>
      </div>
      <div class="phone flex-left">
        <span class="iconfont icon-icon-phone-2 font-20"></span>
        <div class="text">{{ recordName[channel].phone }}</div>
      </div>
      <div class="address flex-left">       
        <span class="iconfont icon-icon_adress font-20"></span>
        <div class="text">{{ recordName[channel].adress }}</div>
      </div>
      <div class="email flex-left">
        <span class="iconfont icon-icon-Email font-20"></span>
        <div class="right-part">
          <div class="text">{{ recordName[channel].email }}</div>
          <div class="text" v-if="recordName[channel].email2">{{ recordName[channel].email2 }}</div> 
        </div>       
      </div>
    </div>
    <!-- 提交成功弹窗 -->
    <div class="success-tips" v-if="ifSuccess">{{$t('successtips')}}</div>
  </div>
</template>

<script>
export default {
  name: 'homePage',
  props: {
  },
  data() {
    return {
      channel: Number(process.env.VUE_APP_WEBSITE_TYPE), //1:香港  2:新加坡  3:space wings
      logoStyle: {
        1: '',
        2: 'singapore-logo',
        3: ''
      },
      navLogo: { 
        1: {
          white: require('../assets/img/logo_white@2x.png'),
          black: require('../assets/img/logo_black.png')
        },
        2: {
          white: require('../assets/img/logo_singapore_white.png'),
          black: require('../assets/img/logo_singapore_black.png')
        },
        3: {
          white: require('../assets/img/logo_spacewings_white.png'),
          black: require('../assets/img/logo_spacewings_black.png')
        }
      },
      submitLogo: {
        1: require('../assets/img/logo_hk.png'),
        2: require('../assets/img/logo_singapore.png'),
        3: require('../assets/img/logo_sw.png')
      },
      //1:香港  2:新加坡  3:space wings
      recordName: {
        1: {
          company: 'HONG KONG SHIBO TECHNOLOGY CO., LIMITED',
          phone: '852-62133007',
          adress: 'Room I-1, 4/F, Block 2 Golden Dragon Industrial Centre,162-170 Tai Lin Pai Road,Kwai Chung, N.T.', //'Suite 902, One Midtown, 11 Hoi Shing Road, Tsuen Wan, N.T., Hong Kong',
          email: 'contact@shibohk.info',
          email2: 'semonxu2046@gmail.com'
        },
        2: {
          company: 'HONG KONG SHIBO TECHNOLOGY CO., LIMITED',
          phone: '852-62133007',
          adress: 'Suite 902, One Midtown, 11 Hoi Shing Road, Tsuen Wan, N.T., Hong Kong',
          email: 'contact@shibohk.info',
        },
        3: {
          company: 'Space Wings Technology Co., Limited',
          phone: '+85295738534',
          adress: 'ROOM 1201, 12/F TAI SANG BANK BUILDING 130-132 DES VOEUX ROAD CENTRAL HK',
          email: 'contact@spacewings.live',
        }
        
      },

      ifSuccess: false, 
      ifFilter: false, //页面是否有滑动
      ifSubmit: false,
      logoImg: {
        1: require('../assets/img/logo_white@2x.png'),
        2: require('../assets/img/logo_singapore_white.png'),
        3: require('../assets/img/logo_spacewings_white.png'),
      },
      navBtnsData: [],
      _scrollTop: 0, 
      inputData: [1,2,3,4],
      scrollDistance: {
        0: [0,799],
        1: [820, 1599],
        2: [1620, 2449],
        3: [2450]
      },
      focusCol: '#1B1E20',
      blurCol: '#CCCCCC',
      params: {
        name: '',
        email: '',
        phone: '',
        question: ''
      },
      timer1: null,
      timer2: null,
      ifLightsubmitbtn: false, //是否点亮提交按钮
    }
  },
  created() {
    console.log(this.$t('navTexts'), '................当前语言')
    clearTimeout(this.timer1)
    clearTimeout(this.timer2)

    this.ifFilter = false
    this.changeNavbtnsData()

    window.onscroll = () => {
      // console.log('监听到页面滑动.........', this.getScrollTop())
      this._scrollTop = this.getScrollTop()
      this.ifFilter = this._scrollTop >= 500 ? true : false;
      if(this._scrollTop >= 800 && this._scrollTop < 1600){
        this.changeCheckbtn(1)
      } else if(this._scrollTop > 1600 && this._scrollTop < 2450) {
        this.changeCheckbtn(2)
      } else if(this._scrollTop >= 2450) {
        this.changeCheckbtn(3)
      } else {
        this.changeCheckbtn(0)
      }
    }
  },
  methods: {
    //失去焦点
    blurFn(event, idx){
      let thisNode = event.srcElement.parentNode.querySelector('.iconfont')
      thisNode.style.color = this.blurCol
      // console.log(thisNode, idx, '...............失去焦点')
      const ifEmpty = this.checkEmpty(this.params)
      // console.log(ifEmpty, '.............ifEmpty')
      if(!ifEmpty) this.ifLightsubmitbtn = true
    },  
    //获取到焦点
    focusFn(event, idx){
      let thisNode = event.srcElement.parentNode.querySelector('.iconfont')
      thisNode.style.color = this.focusCol
    },
    //input输入时
    inputFn(event){
      const ifEmpty = this.checkEmpty(this.params)      
      // console.log(ifEmpty, '.............ifEmpty')
      this.ifLightsubmitbtn = !ifEmpty ? true : false
    },
    //查找未获取到焦点的input节点
    findNofocusdom(idx){
      const newData = []
      this.inputData.forEach(item=>{
        if(item !== idx) {
          newData.push(item)
        }
      })
      return newData
    },
    //修改选中的btn 
    changeCheckbtn(idx){
      this.removeCheck()
      this.navBtnsData[idx].ifCheck = true
    },
    getScrollTop() {
      var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
      if (document.body) {
        bodyScrollTop = document.body.scrollTop;
      }
      if (document.documentElement) {//兼容ie
        documentScrollTop = document.documentElement.scrollTop;
      }
      scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
      return scrollTop;
    },
    //获取可滚动高度
    getScrollHeight() {
      var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight;
      }
      if (document.documentElement) {//兼容ie
        documentScrollHeight = document.documentElement.scrollHeight;
      }
      scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
      return scrollHeight;
    },
    //获取可见区域高
    getWindowHeight() {
      var windowHeight = 0;
      if (document.compatMode == "CSS1Compat") {//兼容ie
        windowHeight = document.documentElement.clientHeight;
      } else {
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    },

    changeNavbtnsData(){
      this.$t('navTexts').forEach((item, index) => {
        let obj = {
          ifCheck: index === 0 ? true : false,
          desc: item
        }
        this.navBtnsData.push(obj)
      });
      console.log('navBtnsData.................', this.navBtnsData)
    },
    toTop() {
      console.log('.......向上滚动')
      let top = this.$refs.bgTwo.scrollTop;

      console.log(this._scrollTop, '.............当前视口距离顶部的距离')

      // 实现滚动效果 
      const timeTop = setInterval(() => {
        this.$refs.bgTwo.scrollTop -=50;
        // this._scrollTop -= 50
        // console.log(this._scrollTop, '........._scrollTop')
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    //鼠标移入事件
    onMouseEnter(val, idx){
      this.removeCheck()
      val.ifCheck = true
    },
    //鼠标移出事件
    onMouseLeave(val, idx){
      this.removeCheck()
      val.ifCheck = true
    },
    //移除所有btn的选中
    removeCheck(){
      this.navBtnsData.forEach(item => {
        item.ifCheck = false
      })
    },
    //切换导航按钮
    switchTab(val, idx) {
      this.removeCheck()
      val.ifCheck = true      
      window.scrollTo({
        top: this.scrollDistance[idx][0],
        behavior: 'smooth'
      })
    },
    checkEmpty(obj){
      for(var key in obj) {
        if(obj.hasOwnProperty(key)) {
          if(!obj[key]) {
            return true
          }
        }
      }
      return false
    },
    //提交
    submitForm(){
      const ifEmpty = this.checkEmpty(this.params)
      if(ifEmpty) {
        return false
      } else {
        this.ifSubmit = true
      }
      
      this.timer1 = setTimeout(() => {
        this.ifSuccess = true
        this.ifSubmit = false        
        this.timer2 = setTimeout(() => {        
          this.ifSuccess = false
        }, 2000);
      }, 3000);
    }
  }
}
</script>

<style src="../iconfont/iconfont.css"></style>
<style lang="scss" scoped>
@import '../assets/css/common.scss';
@import '../assets/css/flash.css';
.success-tips {
  width: 10%;
  height: 54px;
  line-height: 54px;
  background: #1B1E20;
  border-radius: 8px 8px 8px 8px;
  color: #fff;
  position: fixed;
  top: 50%;
  left: 45%;
  right: 0;
  bottom: 0;
  // margin: auto;
  transform: translate(0, 0);
  font-size: 16px;
}
.form-color-default {  
  color: #CCCCCC;
}
.form-color-active {  
  color: #1B1E20;  
}
.filter-color {
  color: rgba(27,30,32,0.5);
}
.active {
  color: #fff;
}
.noactive {
  color: #FFFFFF;
}
.active-filter {
  color: #1B1E20;
}
.home-container {
  width: 100%;
  position: relative;

  .filter-head {
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    background: rgba(255,255,255,0.6);
  }
  .head-navigation {
    width: 100%;
    height: 92px;
    position: fixed;
    top: 0;
    @include flex-around;
    z-index: 999;

    .left-part {
      img {
        width: 243px;
        height: 48px;
      }
      .singapore-logo {
        width: 124px;
        height: 48px;
      }
    }

    .right-part {
      @include flex-around;

      .nav-btn {
        height: 30px;
        font-family: SF Pro Text, SF Pro Text;
        font-weight: 600;
        font-size: 16px;
        line-height: 19px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin-right: 24px;
        position: relative;
        cursor: pointer;
      }
      .bottom-line {
        width: 24px;
        height: 3px;
        background: #fff;
        border-radius: 2px 2px 2px 2px;
        margin: 8px auto 0 auto;
      }
      .filter-line {        
        background: #1B1E20;
      }
    }
  }
  .head-img {
    height: 880px;    
    background: url('../assets/img/bg1@2x.png') no-repeat center;
    background-size: cover;

    .float-text {
      position: absolute;
      top: 172px;
      width: 100%;
      text-align: center;
      border: 1px solid red;

      .p1 {
        margin-bottom: 12px;
        font-family: SF Pro Text, SF Pro Text;
        font-weight: bold;
        font-size: 32px;
        color: #FFFFFF;
        line-height: 38px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .p2 {
        width: 100%;
        height: 72px;
        padding: 0 35vw;
        margin-bottom: 32px;
        font-family: SF Pro Text, SF Pro Text;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        box-sizing: border-box;
      }
    }
    img {
      width: 100%;
      height: 100%;
    }
    .contact-us {
      cursor: pointer;
      position: absolute;
      top: 330px;
      left: 50%;
      transform: translateX(-50%);
      width: 210px;
      height: 48px;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 47px 47px 47px 47px;
      border: 1px solid #FFFFFF;
      @include flex-cen;

      img {
        width: 24px;
        height: 24px;
        margin-right: 5px;
      }

      .text {
        font-family: SF Pro Text, SF Pro Text;
        font-weight: 600;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 19px;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-left: 4px;
      }

      .icon-icon-phone-2 {
        color: #FFFFFF;
      }
    }
    .contact-us:hover {
      background: #FFFFFF;
      .text,
      .icon-icon-phone-2 {
        color: #303335;
      }
    }
    .contact-us:active {
      background:#EFF8FF;
    }
  }

  .two-img-box,
  .three-img-box {
    width: 100%;
    height: 800px;

    .float-text {
      .p1 {
        font-family: SF Pro Text, SF Pro Text;
        font-weight: bold;
        font-size: 32px;
        color: #1B1E20;
        line-height: 38px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .p2 {
        font-family: SF Pro Text, SF Pro Text;
        font-weight: 400;
        font-size: 16px;
        color: #999999;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
  }

  .two-img-box {
    background: url('../assets/img/bg2@2x.png') no-repeat center;
    background-size: cover;

    .float-text {
      .p1 {
        padding: 172px 0 16px 0;
      }

      .p2 {
        padding: 0 36vw;
      }
    }
  }
  .three-img-box {
    background: url('../assets/img/bg3@2x.png') no-repeat center;
    background-size: cover;

    .float-text {
      .p1 {
        padding: 110px 0 16px 0;
      }

      .p2 {
        padding: 0 34vw;
      }
    }
  }

  .submit-form {
    width: 100%;
    height: 604px;
    padding-top: 90px;
    box-sizing: border-box;
    .logo {
      width: 96px;
      height: 96px;
      margin-bottom: 16px;
    }
    .float-text {
      font-family: SF Pro Text, SF Pro Text;
      font-weight: bold;
      font-size: 24px;
      color: #1B1E20;
      line-height: 28px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      padding: 0 37vw;
      margin-bottom: 40px;
    }

    .form-part {
      padding-bottom: 32px;
      display: grid;
      justify-content: center;
      grid-template-columns: repeat(2, 360px);
      /*repeat重复函数*/
      // grid-template-rows:repeat(2, 360px);
      grid-row-gap: 16px;
      grid-column-gap: 16px;

      .input-box {
        @include flex-left;
        // width: 360px;
        height: 58px;
        background: #F8F8F8;
        border-radius: 8px 8px 8px 8px;
        font-family: SF Pro Text, SF Pro Text;
        font-weight: 500;
        font-size: 18px;
        color: #CCCCCC;
        line-height: 21px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        padding: 0 16px 0 16px;

        input {
          width: 325px;
          height: 58px;
          text-indent: 8px;
          font-family: SF Pro Text, SF Pro Text;
          font-weight: 500;
          font-size: 18px;
          line-height: 21px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          text-decoration-line: none;
          background: transparent;
          border: none;
          color: #1B1E20;
        }
        input::placeholder {
          color: #CCCCCC;
        }
        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .submit-btn {
      width: 736px;
      height: 54px;
      background: #1B1E20;
      border-radius: 8px 8px 8px 8px;
      opacity: 0.3;
      margin: auto;
      font-family: SF Pro Text, SF Pro Text;
      font-weight: bold;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 54px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
      @include flex-cen;
      .loading {
        display: block;
        border: 1px solid red;
        width: 18px;
        height: 18px;
        background: conic-gradient( from 45deg at 50% 0%, #FFFFFF 4%, rgba(255,255,255,0) 5%);
        border-radius: 0px 0px 0px 0px;
      }
      .loading-icon {
        width: 18px;
        height: 18px;
        margin-right: 9px;
        animation: loading 2s ease-in infinite;
      }
    }
   
    .light-submit-btn {
      background: #1B1E20;
      border-radius: 8px 8px 8px 8px;
      opacity: 0.9;
    }
    .submit-btn:active {
      background: #0C0E10;
      border-radius: 8px 8px 8px 8px;
      opacity: 0.9;
    }
  }
  .bottom-part {
    width: 100%;
    height: 200px;
    background: #FAF9F9;
    border-radius: 0px 0px 0px 0px;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(2, 481px);
    /*repeat重复函数*/
    grid-template-rows: repeat(2, 48px);
    grid-row-gap: 0;
    grid-column-gap: 0;
    padding: 49px 0 0 0;
    .iconfont {
      color: #1B1E20;
      // font-weight: bold;
    }
    img {
      width: 20px;
      height: 20px;
      margin-right: 8px;
    }

    .text {
      font-family: SF Pro Text, SF Pro Text;
      font-weight: 400;
      font-size: 15px;
      color: #1B1E20;
      line-height: 18px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-left: 8px;
    }

    .phone,
    .email {
      margin-left: 240px;
    }
    .email {
      img {
        margin-top: 3px;
      }
    }
  }
}
</style>
